<template>
    <div class="bottom">
        <p>总购买数量: {{ num }}</p>
        <p>
            <button class="pay" @click="pay">去结算</button>
            <button class="clear" @click="clear">清空购物车</button>
            <button class="clear_select" @click="clearSelect">
                删除所有已选中
            </button>
            <button class="list" @click="returnList">返回列表页</button>
        </p>
        <p>
            总价格 : ￥ <span>{{ total }}</span>
        </p>
    </div>
</template>

<script>
export default {
    name: "Handle",
    data() {
        return {};
    },
    props: ["list"],
    computed: {
        // 总价
        total() {
            return this.list
                .filter((item) => item.select)
                .reduce((prev, cur) => {
                    return prev + cur.buy_num * cur.price;
                }, 0);
        },
        // 总数
        num() {
            return this.list
                .filter((item) => item.select)
                .reduce((prev, cur) => {
                    return prev + cur.buy_num;
                }, 0);
        },
    },

    methods: {
        // 支付
        pay() {
            confirm(`需支付${this.total}`);
        },
        // 全部清除
        clear() {
            this.list.splice(0, this.list.length);
        },
        // 清除选中
        clearSelect() {
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].select && this.list.splice(i, 1) && i--;
            }
        },
        // 返回列表页
        returnList() {
            window.location.href =
                "https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_f35f8872c9cf45a0bfb813081982c738";
        },
    },
};
</script>

<style></style>
